<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Docking Code</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="/static/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="/static/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="/static/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/static/css/app.css">
    <link rel="stylesheet" href="/static/css/amazeui.datatables.min.css"/>


    <link href="/static/css/css/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/css/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/css/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/css/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet"
          type="text/css"/>
    <!-- END GLOBAL MANDATORY STYLES -->
    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <link href="/static/css/css/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/css/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="/static/css/css/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css" />
    <link rel="stylesheet" href="/static/css/css/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" />
    <link rel="stylesheet" href="/static/css/css/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" />
    <link rel="stylesheet" href="/static/css/css/plugins/bootstrap-daterangepicker/daterangepicker.min.css" />
    <link rel="stylesheet" href="/static/css/css/plugins/clockface/css/clockface.css" />
    <!-- END PAGE LEVEL PLUGINS -->
    <!-- BEGIN THEME GLOBAL STYLES -->
    <link href="/static/css/css/components.min.css" rel="stylesheet" id="style_components" type="text/css"/>
    <link href="/static/css/css/plugins.min.css" rel="stylesheet" type="text/css"/>
    <!-- END THEME GLOBAL STYLES -->
    <!-- BEGIN THEME LAYOUT STYLES -->
    <link href="/static/css/css/layout/css/layout.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/css/layout/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color"/>
    <link href="/static/css/css/layout/css/custom.min.css" rel="stylesheet" type="text/css"/>
    <script src="/static/js/jquery.min.js"></script>
</head>
<body class="theme-white">
<div class="am-g tpl-g" id="form_wizard_1">
    <div class="portlet-body form">
        <form class="form-horizontal" action="#" id="submit_form" method="POST" novalidate="novalidate">
            <div class="form-wizard">
                <div class="form-body">
                    <div class="tab-content">
                        <div class="alert alert-success display-none">
                            <button class="close" data-dismiss="alert"></button>
                            Your form validation is successful!
                        </div>
                        <div class="tab-pane active" id="tab1">
                            <h3 class="block">Provide your account details</h3>
                            <div id="updateDB"></div>
                            <script>

                                /*var countstr = "";
                                var counttype = "";
                                var columnstr = "";
                                var columntype = "";
                                var length = "";*/

                                var html = $("#updateDB").html();

                                $.ajax({
                                    type : "get",
                                    url : "/updateJsonDB",
                                    async : false,
                                    success : function(data){
                                        console.log(data[1].TableName);
                                        html += '<div class="form-group" >';
                                        html += '<div class="col-md-4" >';
                                        html += '<select id="selectTable" class="form-control select2-allow-clear">';
                                        html += '<option></option>';
                                        for (var i = 0; i < data.length; i++) {
                                            html += '<option value="'+ data[i].TableName +'" >'+ data[i].TableName +'</option>';
                                        }
                                        html += '</select>';
                                        html += '</div>';
                                        html += '</div>';

                                        $("#updateDB").html(html)
                                    }
                                });

                                /*$.get("/updateJsonDB", function(data) {




                                    for (var i = 1; i < 50; i++){
                                        if ($("#ColumnName" + i).length === 0) {
                                            countstr = "ColumnName" + i;
                                            counttype = "ColumnType" + i;
                                            columnstr = "字段名" + i;
                                            columntype = "字段类型" + i;
                                            length = "length" + i;
                                            break;
                                        }
                                    }

                                    for (var i = 0; i < data.length; i++){
                                        html += '<div class="form-group" style="width:50%;float:left">';
                                        html += '<label class="control-label col-md-3">' + "字段名" + i;
                                        html += '<span class="required" aria-required="true"> * </span>';
                                        html += '</label>';
                                        html += '<div class="col-md-4">';
                                        html += '<input id="ColumnName' + i + '" type="text" class="form-control" value="'+ data[i].ColumnName +'" name="ColumnName'+ i +'">';
                                        html += '</div></div>';
                                        html += '<div class="form-group" style="width:50%;float:left;margin-left:45px;">';
                                        html += '<div class="col-md-4" style="width:40%;float:left">';
                                        html += '<label class="control-label col-md-3">字段类型' + i;
                                        html += '<span class="required" aria-required="true"> * </span>';
                                        html += '</label>';
                                        html += '<select id="ColumnType'+ i +'" class="form-control select2-allow-clear">';
                                        html += '<option></option>';
                                        html += '<option value="varchar" <c:if test="${type==0}">selected</c:if>>varchar</option>';
                                        html += '<option value="int" <c:if test="${type==0}">selected</c:if>>int</option>';
                                        html += '</select>';
                                        html += '</div>';
                                        html += '<div class="col-md-4" style="width:40%;float:left">';
                                        html += '<label class="control-label col-md-3">数据长度';
                                        html += '<span class="required" aria-required="true"> * </span>';
                                        html += '</label>';
                                        html += '<input id="length' + i + '" type="text" class="form-control" name="length'+ i +'">';
                                        html += '</div></div>';
                                    }
                                }).done();*/


                            </script>
                        </div>
                    </div>
                </div>
                <div class="form-actions">
                    <div class="row">
                        <div class="col-md-offset-3 col-md-9">
                            <button class="btn btn-outline green btn-next" onclick="clicknext()">Submit</button>
                            <script>
                                function clicknext() {
                                    var TableName = $("#selectTable").val();

                                    console.log(TableName);

                                    $.ajax({
                                        type : 'post',
                                        url : '/updateJsonDB',
                                        data : {
                                            TableName : TableName
                                        },
                                        success : function () {
                                            parent.window.location.href = '/node'
                                        }
                                    });
                                }
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<!--<script src="/static/js/amazeui.min.js"></script>-->
<!--<script src="/static/js/amazeui.datatables.min.js"></script>-->
<!--<script src="/static/js/dataTables.responsive.min.js"></script>-->
<!--[if lt IE 9]>
<script src="/static/css/css/plugins/respond.min.js"></script>
<script src="/static/css/css/plugins/excanvas.min.js"></script>
<script src="/static/css/css/plugins/ie8.fix.min.js"></script>
<![endif]-->
<!-- BEGIN CORE PLUGINS -->
<script src="/static/css/css/plugins/jquery.min.js" type="text/javascript"></script>
<script src="/static/css/css/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/static/css/css/plugins/js.cookie.min.js" type="text/javascript"></script>
<script src="/static/css/css/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="/static/css/css/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="/static/css/css/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="/static/css/css/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>
<script src="/static/css/css/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="/static/css/css/plugins/jquery-validation/js/additional-methods.min.js" type="text/javascript"></script>
<script src="/static/js/bootstrap-wizard/jquery.bootstrap.wizard.min.js" type="text/javascript"></script>
<script src="/static/css/css/plugins/moment.min.js"></script>
<script src="/static/css/css/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="/static/css/css/plugins/bootstrap-daterangepicker/daterangepicker.min.js"></script>
<script src="/static/css/css/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="/static/css/css/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>
<script src="/static/css/css/plugins/clockface/js/clockface.js"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL SCRIPTS -->
<script src="/static/js/js/app.min.js" type="text/javascript"></script>
<!-- END THEME GLOBAL SCRIPTS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="/static/js/js/form-wizard.js" type="text/javascript"></script>
<script src="/static/css/css/plugins/components-date-time-pickers.min.js"></script>
<script src="/static/css/css/plugins/components-select2.min.js"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<script src="/static/js/js/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
<script src="/static/js/js/layouts/layout/scripts/demo.min.js" type="text/javascript"></script>
<script src="/static/js/js/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
<script src="/static/js/js/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>
<script src="/static/js/layer/layer.js"></script>
<script src="/static/css/css/plugins/ui-buttons.min.js"></script>
<!-- END THEME LAYOUT SCRIPTS -->
</body>
</html>